<template lang="html">
    <div id="app">
            <div class="index_header clearfix">
                <transition name="slide-fade">
                <local v-show="choose_local" v-on:send_msg="get_msg"></local>
                </transition>
                <div class="location" v-on:click="localto()">
                    <span>{{chosed_local}}</span><span><i class="iconfont">&#xe600;</i></span>
                </div>
                <div class="routes clearfix">
                    <!-- 相当于a标签的作用 -->
                    <div class="routes_node" @click="active1()">
                        <router-link to="/nows">正在热映</router-link>
                    </div>
                    <div class="routes_node" @click="active2()">
                    <router-link to="/coming">即将上映</router-link>
                    </div>
                    <div class="bottom_link">
                    </div>
                </div>
                <div class="personal_center fr">
                    <i class="iconfont personal_icon">&#xe61a;</i>
                </div>
            </div>

        <!-- 相当于components -->
            <router-view   v-show="!choose_local">
                <mt-spinner type="fading-circle"></mt-spinner>
            </router-view>

    </div>
</template>

<script>
import local from "../views/local.vue";

export default {
    components: {
        local,
    },
    data: function() {
        return {
            choose_local: false,
            chosed_local: "广州"
        }
    },
    computed: {
        // 计算属性，根据数据以来变化而变化，并且数据会使用缓存的形式
        header_title: function() {
            return this.$store.state.title;
        }
    },
    methods: {
        localto: function() {
            this.choose_local = true;
        },
        get_msg: function(get_name) {
            this.chosed_local = get_name;
            this.choose_local = false;
            // console.log(this.choose_local);
            // console.log(this.chosed_local);
        },
        active1: function() {
            var active_link = document.querySelector('.bottom_link');
            active_link.style.left = '0%'
        },
        active2: function() {
            var active_link = document.querySelector('.bottom_link');
            active_link.style.left = '50%'
        },

    }
}
</script>

<style lang="scss">
@font-face {
    font-family: 'iconfont';
    /* project id 541017 */
    src: url("//at.alicdn.com/t/font_541017_oo9tyx023f28olxr.eot");
    src: url("//at.alicdn.com/t/font_541017_oo9tyx023f28olxr.eot?#iefix") format('embedded-opentype'), url("//at.alicdn.com/t/font_541017_oo9tyx023f28olxr.woff") format('woff'), url("//at.alicdn.com/t/font_541017_oo9tyx023f28olxr.ttf") format('truetype'), url("//at.alicdn.com/t/font_541017_oo9tyx023f28olxr.svg#iconfont") format('svg');
}
.iconfont {
    font-family: "iconfont";
    font-size: 12px;
    font-style: normal;
    color: #fff;
}
   .loading_show{
        width: 20vw;
        height: 20vw;
        position: absolute;
        margin: auto;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
    }
.index_header {
    width: 100vw;
    height: 6vh;
    background-color: #ff7ba0;
    color: #fff;
    font-size: 0.875rem;
    .location {
        float: left;
        width: 30vw;
        height: 100%;
        line-height: 6vh;
        margin-left: 30px;
        span {
            padding-left: 1vw;
        }
    }
    .routes {
        float: left;
        position: relative;
        .routes_node {
            float: left;
        }
        .bottom_link {
            position: absolute;
            background-color: white;
            bottom: 0;
            height: 3px;
            width: 50%;
            left: 0;
            transition: all 0.5s ease;
        }
        a {
            color: #fff;
            line-height: 6vh;
            padding: 0 5vw;
            &:active {
                color: #ff4d64;
            }
        }
    }
    .personal_center {
        padding-right: 3vw;
        .personal_icon {
            font-size: 25px;
            line-height: 6vh;

        }
    }
}
.film_list {
    .film_item {
        padding: 20px 15px;
        .item_cover {
            margin-right: 15px;
            width: 17.3vmin;
            height: 25.3vmin;
            img {
                width: 100%;
            }
        }
        .film_score {
            text-align: center;
            .score {
                color: #fc7103;
            }
            .buy_now {
                background-color: #ff7ba0;
                color: white;
                border-radius: 3.125rem;
                height: 1.75rem;
                line-height: 1.75rem;
                padding: 0 0.8125rem;
                font-size: 0.75rem;
            }
        }

        .film_info {
            .film_name {
                font-size: 16px;
                line-height: 32px;
                color: #000;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .film_intro {
                height: 24px;
                line-height: 24px;
                color: #8e8e8e;
                font-size: 12px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                display: inline-block;
            }
            .counts {
                line-height: 24px;
                color: #8e8e8e;
                font-size: 12px;
                .counts_num {
                    color: #8aa2bf;
                }
                .counts_cinema {
                    padding-right: 20px;
                }
            }
            .coming_time {
                line-height: 24px;
                color: #ffb375;
                font-size: 12px;
            }
        }

    }
}

/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
    transition: all 0.3s ease;
}
.slide-fade-leave-active {
    transition: all 0.3s ease;
}
.slide-fade-enter,
.slide-fade-leave-to {
    transform: translateY(-10px);
    opacity: 0;
}
</style>
